<#import "/spring.ftl" as spring />
<#import "html-macro.ftl" as h />
<#import "declaration-macro.ftl" as d />
<div class="dashedbar text-blue"><span>集装箱信息</span></div>
<#--只读模式不显示-->
<div class="ui inline form">
<#if !h.readMode__>
    <div class="ui grid" id="declaContainers">
        <div class="row">
            <input id="id" type="hidden"/>
            <@h.label width="6" value="集装箱号"/>
            <@h.input width="10" id="containerNo" />
            <@h.label width="6" value="集装箱规格" />
            <@h.dropdown width="10" id="containerStandard" showId="sizeShow" />
            <@h.label width="6" value="自重(KG)" />
            <@h.input width="10" id="containerWeight" dataType="float" />
        </div>
    </div>
<#--<div class="ui error message"></div>-->
    <div class="row ui grid button-line">
        <div class="fifteen wide column right floated">
            <button id="containersAdd" class="mini ui labeled icon button blue right floated">
                <i class="plus icon"></i>
                添加
            </button>
            <button id="containersSave" class="mini ui labeled icon button blue right floated "
                    style="display: none;">
                <i class="save icon"></i>
                保存
            </button>
            <button id="containersCancle" class="mini ui labeled icon button blue right floated "
                    style="display: none;">
                <i class="remove icon"></i>
                取消
            </button>
            <button id="fetchBtn" class="mini ui labeled icon button blue right floated"
                    style="display: none;">
                <i class="fa-cloud-download icon"></i>
                获取柜号
            </button>
            <button class="mini ui labeled icon button blue right floated"
                    id="importContainerListButton">
                <i class="small add circle icon"></i>
                柜号excel导入
            </button>
            <a class="ui"
               href="<@spring.url "/order/download/excel_container"/>">下载柜模板 </a>
            <input type="file" id="fileForBox" accept=".xls" style="display:none;"/>
        </div>
    </div>
</#if>
    <div class="row ui grid button-line" id="containerListSummary" style="display: none;">
        <label></label>
    </div>
    <table name="containerTable" class="ui celled table center aligned notAutoIncrease"
           style="font-size: 12px;">
        <thead>
        <tr>
            <th>集装箱号</th>
            <th>集装箱规格</th>
            <th>自重</th>
        <#--只读模式不显示-->
        <#if !h.readMode__>
            <th>操作</th>
        </#if>
        </tr>
        <#if !h.readMode__>
        <tr>
            <th><input type="checkbox" id="containersCheckAll"/>&nbsp;全选</th>
            <th>
            <#--<button id="containersBatchDelete"
                        class="mini ui labeled icon button blue center">
                    批量删除
                </button>-->
                <button class="mini ui labeled icon button tiny blue" id="containersBatch"><i
                        class="small remove icon"></i>批量删除
                </button>
            <#--<button class="tiny ui button">Tiny</button>-->
            </th>
            <th>&nbsp;</th>
            <th>&nbsp;</th>
        </tr>
        </#if>
        </thead>
        <tbody>
        <#list declaration.sortedDeclaContainers as dc>
        <tr>
            <input name="declaContainers[${dc_index}].id" type="hidden" value="${dc.id}">
            <input name="declaContainers[${dc_index}].containerNo" type="hidden"
                   value="${dc.containerNo}">
            <input name="declaContainers[${dc_index}].containerStandard" type="hidden"
                   value="${dc.containerStandard}">
            <input name="declaContainers[${dc_index}].containerWeight" type="hidden"
                   value="${dc.containerWeight}">
            <td><input type="checkbox"/>&nbsp;${dc.containerNo}</td>
            <td>${dc.containerStandard}</td>
            <td>${dc.containerWeight}</td>
            <#if !h.readMode__>
                <td>
                    <button class="ui mini primary basic button">修改</button>
                    <button class="ui mini negative basic button">删除</button>
                </td>
            </#if>
        </tr>
        </#list>
        </tbody>
    </table>

    <div class="ui inline form soForm">
        <div class="ui grid" id="SO_DIV" <#if h.hasSoMode>style="display: none;"</#if>>
            <div class="row">
            <@h.label width="6" value="SO号" />
        <#if !h.readMode__>
                <@h.input width="10" id="so" name="so" value="${declaration.so}" />
            <#else>
                <@h.input width="10" id="so" name="so" value="${declaration.so}" readonly=true />
            </#if>
            </div>
        </div>
    </div>
</div>
<div class="dashedbar text-blue"><span>随附单证信息</span></div>
<div class="ui inline form">
<#--只读模式不显示-->
<#if !h.readMode__>
    <div class="ui grid" id="suiFuDans">
        <div class="row">
            <input id="id" type="hidden"/>
            <@h.label width="6" value="单证代码" />
            <@h.dropdown width="10" id="suifudan_co" showId="suifudan_co_cn" />
            <@h.label width="6" value="单证编号" />
            <@h.input width="10" id="suifudan_no" />
        </div>
    </div>
<#--<div class="ui error message"></div>-->
    <div class="row ui grid button-line">
        <div class="fifteen wide column right floated">
            <button id="attachedAdd" class="mini ui labeled icon button blue right floated">
                <i class="plus icon"></i>
                添加
            </button>
            <button id="attachedSave" class="mini ui labeled icon button blue right floated">
                <i class="plus icon"></i>
                保存
            </button>
            <button id="attachedCancle" class="mini ui labeled icon button blue right floated">
                <i class="remove icon"></i>
                取消
            </button>
        </div>
    </div>
</#if>
<#--<table class="ui celled striped table relationTable">
    <thead>
    <tr>
        <th colspan="3">单证对应关系</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>报关单商品序号</td>
        <td><input type="text" class="serial-Number"></td>
    &lt;#&ndash; <td colspan="3">
         <div class="inline field">
             <label>报关单商品序号</label>
             <input type="text">
         </div>
     </td>&ndash;&gt;
    </tr>
    <tr>
        <td>对应随附单证商品项号</td>
        <td><input type="text" class="item-Number" name="itemNo"></td>
    </tr>
    <tr>
        <td colspan="3">
            <table class="ui celled table showRealationTable">
                <thead>
                <tr>
                    <th colspan="1">报关单商品序号</th>
                    <th colspan="2">对应随附单证商品项号</th>
                </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </td>
    </tr>
    </tbody>
    <tfoot>
    <tr>
        <td colspan="3" class="operate-relation-button">
        &lt;#&ndash;<button class="mini ui button">确定</button>
            <button class="mini ui button">取消</button>&ndash;&gt;
            <button class="mini ui labeled icon button blue relation-remove">
                <i class="remove icon"></i>
                取消
            </button>
            <button class="mini ui labeled icon button blue relation-sure">
                <i class="plus icon"></i>
                确定
            </button>
        </td>
    </tr>
    </tfoot>
</table>-->
    <table name="suifudanTable" class="ui celled table center aligned notAutoIncrease"
           style="font-size: 12px;">
        <thead>
        <th>单证代码</th>
        <th>单证编号</th>
        <#--只读模式不显示-->
        <#if !h.readMode__>
        <th>操作</th>
        </#if>
        </thead>
        <tbody>
        <#list declaration.suiFuDans as sfd>
        <tr>
            <input name="suiFuDans[${sfd_index}].id" type="hidden" value="${sfd.id}">
            <input name="suiFuDans[${sfd_index}].suifudan_co" type="hidden"
                   value="${sfd.suifudan_co}">
            <input name="suiFuDans[${sfd_index}].suifudan_co_cn" type="hidden"
                   value="${sfd.suifudan_co_cn}">
            <input name="suiFuDans[${sfd_index}].suifudan_no" type="hidden"
                   value="${sfd.suifudan_no}">
            <td>${sfd.suifudan_co}</td>
            <td>${sfd.suifudan_no}</td>
        <#--只读模式不显示-->
            <#if !h.readMode__>
                <td>
                    <button class="ui mini primary basic button">修改</button>
                    <button class="ui mini negative basic button">删除</button>
                </td>
            </#if>
        </tr>
        </#list>
        </tbody>
    </table>
</div>

<div class="ui inline form otherForm">
    <div class="ui grid">
        <div class="row">
            <div class="dashedbar text-blue"><span style="font-size: 12px">其他事项确认</span>
            </div>
        <@h.label width="6" value="特殊关系确认" required=true />
        <@h.dropdown width="10" name="special_relationship_confirm"  value="${((declaration.special_relationship_confirm)?length>0)?string(declaration.special_relationship_confirm,'1')}"/>
        <#--<@h.dropdown width="10" name="special_relationship_confirm"  value="${declaration.special_relationship_confirm}"/>-->
        <@h.label width="6" value="价格影响确认" required=true />
        <@h.dropdown width="10" name="price_impact_confirm"  value="${((declaration.price_impact_confirm)?length>0)?string(declaration.price_impact_confirm,'1')}"/>
        <#--<@h.dropdown width="10" name="price_impact_confirm"  value="${declaration.price_impact_confirm}"/>-->
        <@h.label width="6" value="支付特许权使用费确认" required=true />
        <@h.dropdown width="10" name="payment_royaltils_confirm"  value="${((declaration.payment_royaltils_confirm)?length>0)?string(declaration.payment_royaltils_confirm,'1')}"/>
        <#--<@h.dropdown width="10" name="payment_royaltils_confirm"  value="${declaration.payment_royaltils_confirm}"/>-->
            <div class="dashedbar text-blue"></div>
        <@h.label width="6" value="关联报关单号"  />
        <@h.input width="10" name="re_manifest" value="${declaration.re_manifest}"/>
        <@h.label width="6" value="关联备案号" />
        <@h.input width="10" name="re_record_id"  value="${declaration.re_record_id}"/>
        <@h.label width="6" value="保税/监管场所" />
        <@h.input width="10" name="re_jianguan"  value="${declaration.re_jianguan}"/>
        <@h.label width="6" value="货场代码" />
        <@h.dropdown width="10" name="re_yard_id"  value="${declaration.re_yard_id}"/>
        <@h.label width="6" value="转关提前报关" />
        <@h.dropdown width="10" name="declarUp"  value="${declaration.declarUp}"/>
        <@h.label width="6" value="木质包装" required=true class='add-height'/>
            <div class="ten wide column center aligned ui basic label add-height">
                <div class="ui radio checkbox">
                    <input type="radio" name="is_wood_packaging"
                           <#if declaration.is_wood_packaging == "0">checked="checked"</#if>
                           class="hidden" value="0">
                    <label>无木质包装</label>
                </div>
                <div class="ui radio checkbox">
                    <input type="radio" name="is_wood_packaging"
                           <#if declaration.is_wood_packaging == "1">checked="checked"</#if>
                           class="hidden" value="1">
                    <label>木质包装合格证</label>
                </div>
            </div>

        </div>
    </div>
</div>
<script type="text/javascript">
    var relationBool = true;
    $(document).ready(function () {
        $(".ui.radio.checkbox").checkbox();
        //获取柜号
        $("#fetchBtn").click(function () {
            layer.open({
                           title: "获取柜号",
                           area: '350px',
                           content: "<div class=\"ui one column grid\" id=\"fetchContainerDiv\"><div class=\"row\"><div class=\"column\" style='color: #9F3A38;'></div><div class=\"column ui input\"><input id=\"fetchContainerNo\" type=\"text\" placeholder=\"请输入任意一个柜号获取...\" style=\" width: 100%;\"></div></div></div>",
                           success: function () {
                               var $input = $("#fetchContainerNo");
                               $input.focus();
                               $input.blur(function () {
                                   var v = $input.val();
                                   if (v) {
                                       $input.val(v.toLocaleUpperCase());
                                   }
                               });
                           },
                           yes: function (index) {
                               var $input = $("#fetchContainerNo");
                               var containerNo = $input.val();
                               if (containerNo) {
                                   var $errorMsgDom = $input.parent().prev();
                                   var isContainerInputOk = function (val) {
                                       return !(/[A-Z]{5}/.test(val) || /\d{8}/.test(val));
                                   }
                                   if (!isContainerInputOk(containerNo)) {
                                       $errorMsgDom.text("柜号格式不正确，格式：四个字母+7个数字");
                                       $input.parent().addClass("error");
                                   } else {
                                       $errorMsgDom.text("");
                                       $("#fetchContainerDiv").addClass("ui segment loading");
                                       $.ajaxPlugin({
                                                        url: "<@spring.url "/business/declaration-getContainerInfoVal"/>",
                                                        data: {
                                                            "container_no": containerNo,
                                                            "work_type": "0",
                                                        <#if d.declarationType__>
                                                            "declaration_type": 'E'
                                                        <#else >
                                                            "declaration_type": 'I'
                                                        </#if>

                                                        },
                                                        success: function (data, textStatus,
                                                                           jqXHR) {
                                                            var containers = eval(
                                                                    data.containerInfo);
                                                            if (containers.length == 0) {
                                                                layer.alert("没有获取到柜号，请确认柜号是否正确!");
                                                            } else {
                                                                var bid = containers[0].WORK_NO
                                                                        ? containers[0].WORK_NO.split(
                                                                        ",")[0] : "";
                                                                var regDate = containers[0].REG_DATE
                                                                        ? containers[0].REG_DATE.split(
                                                                        ",")[0] : "";
                                                                var type = containers[0].IO_TYPE
                                                                        ? containers[0].IO_TYPE.split(
                                                                        ",")[0] : "";
                                                                $.each(containers, function (i, n) {
                                                                    var $containersAdd = $(
                                                                            "#containersAdd");
                                                                    if (!$containersAdd.is(
                                                                                    ":hidden")) {
                                                                        $containersAdd.click();
                                                                    }
                                                                    $("#containerNo").val(
                                                                            n.CONTAINER_NO);
                                                                    var $ctSizeDropdown = $(
                                                                            "#containerStandard").parent();
                                                                    var ctSize = n.CT_SIZE == "20"
                                                                            ? "S"
                                                                            : "L";
                                                                    $ctSizeDropdown.dropdown(
                                                                            "set selected",
                                                                            ctSize);
                                                                    $("#containersSave").click();
                                                                });
                                                                if (bid) {
                                                                    var currentDate = Date.parse(
                                                                                    new Date())
                                                                                      / 1000;
                                                                    var _regDate = Date.parse(
                                                                                    regDate) / 1000;
                                                                    var time_ = currentDate
                                                                                - _regDate;
                                                                    if (time_ / (3600 * 24) > 30) {
                                                                        layer.alert(
                                                                                "请注意，当前柜号已存在三联单资料<br/>相关流水号为："
                                                                                + bid + "<br/>日期："
                                                                                + regDate
                                                                                + "<br/>类型：" + (type
                                                                                                == "I"
                                                                                        ? "进口"
                                                                                        : "出口"));
                                                                    } else {
                                                                        layer.close(index);
                                                                    }
                                                                } else {
                                                                    layer.close(index);
                                                                }
                                                            }
                                                        },
                                                        error: function (XMLHttpRequest, textStatus,
                                                                         errorThrown) {
                                                            layer.error("获取柜号出错!");
                                                        },
                                                        complete: function () {
                                                            $("#fetchContainerDiv").remove(
                                                                    "ui segment loading");
                                                        }
                                                    });
                                   }
                               } else {
                                   $input.parent().addClass("error");
                                   $input.focus();
                               }
                           }
                       });
        });
        //验证值是否有效
        function inputValueEmpty(value) {
            return !(value === undefined || '' === value);
        }

        //触发重新验证
        var blurValidate = function () {
            var val = $(this).val();
            if ($(this).css("border-color") == "rgb(255, 0, 0)") {
                if (inputValueEmpty(val)) {
                    $(this).css("border-color", "#ddd");
                    relationBool = true;
                }
            }
        };
        $.each($(".relationTable").find(":text"), function (i, n) {
            $(n).blur(blurValidate);
        });
        //单证对应关系确定按钮
        $(".relation-sure").click(function () {
            var $table = $(".relationTable");
            var $serialNumber = $(".serial-Number");
            var $itemNumber = $(".item-Number");
            var serialVal = $serialNumber.val();
            var itemVal = $itemNumber.val();
            var $goodsTable = $("#commodities").nextAll("table");
            var $goodsTr = $goodsTable.find("tbody tr");
            if (serialVal && serialVal != " " && itemVal && itemVal != " ") {
                var $tbody = $(".showRealationTable").find("tbody");
                if (($tbody.find("tr").length - 4) < $goodsTr.length) {
                    var str = "<tr><td>" + serialVal + "</td><td>" + itemVal + "</td></tr>";
                    $tbody.append(str);
                    $table.hide();
                } else {
                    $(this).addClass("disabled");
                }

            } else {
                if (!inputValueEmpty(serialVal) && !inputValueEmpty(itemVal)) {
                    $serialNumber.css("border-color", "red").focus();
                    $itemNumber.css("border-color", "red");
                } else if (!inputValueEmpty(serialVal) && inputValueEmpty(itemVal)) {
                    $serialNumber.css("border-color", "red");
                } else if (inputValueEmpty(serialVal) && !inputValueEmpty(itemVal)) {
                    $itemNumber.css("border-color", "red");
                }
                relationBool = false;
            }
        });
        $(".relation-remove").click(function () {
            var $tbody = $(".showRealationTable").find("tbody");
            var $table = $(".relationTable");
            $table.find(":text").val("");
            /* $tbody.find("tr").remove();*/
            $table.hide();
        });
    });
</script>